import React, { useRef, useState } from "react";
import { FolderViewOutlined } from "@ant-design/icons";
import './search.scss'
import { Input, Select, Space, Carousel } from "antd";

const { Search } = Input;

const suffix = (
  <FolderViewOutlined
    style={{
      fontSize: 22,
      color: "#ccc",
    }}
  />
);

const options = [
  {
    value: "全部",
    label: "全部",
  },
  {
    value: "H5",
    label: "H5",
  },
  {
    value: "海报",
    label: "海报",
  },
  {
    value: "长页",
    label: "长页",
  },
  {
    value: "表单",
    label: "表单",
  },
  {
    value: "互动",
    label: "互动",
  },
  {
    value: "电子画册",
    label: "电子画册",
  },
  {
    value: "视频",
    label: "视频",
  },
];


const contentStyle = {
  margin: 0,
  height: '40px',
  color: '#ccc',
  lineHeight: '42px',
  paddingLeft: '27px',
};

const App = () => {
  let SearchRef = useRef()
  // 控制轮播效果显示隐藏
  const [SearchSwiper, setSearchSwiper] = useState('block')
  // 控制轮播效果的值
  const [SearchSwiperValue, setSearchSwiperValue] = useState('')

  const ClickSwiper = (value) => {
    setSearchSwiper('none')
    setSearchSwiperValue(value.value)
    SearchRef.current.focus()
  }

  // 点击搜索按钮触发事件
  const onSearch = (value, _e, info) => {
    if (!value) {//输入框没输入内容的话使用placeholder内容
      console.log(SearchSwiperValue);
    } else {//输入框有内容的话使用输入框内容
      console.log(info?.source, value);
    }
  }

  // 失焦重新开启轮播图，清空placeholder
  const BlueSearch = () => {
    setSearchSwiper('block')
    setSearchSwiperValue('')
  }

  return (
    <div className="head-search">
      <Space direction="vertical" size="middle" >
        <Space.Compact>
          <Select defaultValue="全部" options={options} />
          <Search
            className="Input-Search"
            placeholder={SearchSwiperValue}
            enterButton
            size="large"
            suffix={suffix}
            onSearch={onSearch}
            ref={SearchRef}
            onBlur={BlueSearch}
          />
          {/* 轮播效果 */}
          <div className="search-Swiper" style={{ display: SearchSwiper }}>
            <Carousel dotPosition="left" dots={false} autoplay infinite={true}>
              {
                options && options.map((item, index) => {
                  return <div key={item.value}>
                    <div style={contentStyle} onClick={() => ClickSwiper(item)}>{item.value}</div>
                  </div>
                })
              }
            </Carousel>
          </div>
        </Space.Compact>
      </Space>
    </div>
  )
}

export default App;
